<template>
  <div class="app-container">
    <el-config-provider :locale="zhCn">
      <el-container class="layout-container">
        <el-header class="header" v-if="$route.meta.hideLayout !== true">
          <div class="logo">在线学习平台</div>
          <el-menu
            mode="horizontal"
            :default-active="activeRoute"
            router
            class="main-menu"
          >

            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/announcements">公告</el-menu-item>
            <template v-if="!isAuthenticated">
              <el-menu-item index="/login">登录</el-menu-item>
              <el-menu-item index="/register">注册</el-menu-item>
            </template>
            <template v-else>
              <el-menu-item index="/classes">班级</el-menu-item>
              <el-menu-item index="/exams">考试中心</el-menu-item>
              <el-menu-item index="/my-records" v-if="isStudent">我的考试记录</el-menu-item>
              <el-menu-item index="/profile">个人中心</el-menu-item>
              
              <!-- AI助手子菜单 -->
              <el-sub-menu index="/ai-assistant">
                <template #title>AI 助手</template>
                <el-menu-item index="/deepseek-chat">
                  <el-icon><ChatDotRound /></el-icon>
                  智能对话 (增强版)
                </el-menu-item>
                <el-menu-item index="/deepseek-chat-simple">
                  <el-icon><Comment /></el-icon>
                  简单对话 (兼容版)
                </el-menu-item>
              </el-sub-menu>
              
              <el-menu-item v-if="isAdmin" index="/admin">管理后台</el-menu-item>
              <el-menu-item v-if="isTeacher && !isAdmin" index="/teacher/questions">试题管理</el-menu-item>
              <el-menu-item @click="handleLogout">退出登录</el-menu-item>
            </template>
          </el-menu>
          <div v-if="isAuthenticated" class="user-info">
            <el-avatar 
              :size="32" 
              :src="userAvatarUrl"
              :key="userInfo.id + '-' + userInfo.avatarUrl"
            ></el-avatar>
            <span class="username">{{ userInfo.username }}</span>
          </div>
        </el-header>
        
        <el-main class="main-content">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
        
        <el-footer class="footer" v-if="$route.meta.hideLayout !== true">
          <p>© {{ new Date().getFullYear() }} 在线学习平台 - 版权所有</p>
          <p>备案号：
            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
              鲁ICP备2024087583号-4
            </a>
          </p>
        </el-footer>
      </el-container>
      
      <el-backtop></el-backtop>
    </el-config-provider>
  </div>
</template>

<script>
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ChatDotRound, Comment } from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import config from './config'

export default {
  name: 'App',
  components: {
    ChatDotRound,
    Comment
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    
    // 计算属性：确保用户头像路径完整，提供默认头像
    const userAvatarUrl = computed(() => {
      const userInfo = store.getters.getUserInfo;
      if (userInfo.avatarUrl) {
        return config.getFullResourceUrl(userInfo.avatarUrl);
      }
      // 如果没有头像，返回空字符串，Element Plus会显示默认头像
      return '';
    });
    
    const isAuthenticated = computed(() => store.getters.isAuthenticated)
    const isAdmin = computed(() => store.getters.isAdmin)
    const isTeacher = computed(() => store.getters.isTeacher)
    const isStudent = computed(() => !isAdmin.value && !isTeacher.value && isAuthenticated.value);
    const userInfo = computed(() => store.getters.getUserInfo)
    const activeRoute = computed(() => route.path)
    
    const handleLogout = async () => {
      try {
        const result = await store.dispatch('logout')
        if (result.success) {
          ElMessage.success('退出登录成功')
          if (route.meta.requiresAuth) {
            router.push('/login')
          }
        }
      } catch (error) {
        ElMessage.error('退出失败，请稍后重试')
      }
    }
    
    onMounted(() => {
      if (isAuthenticated.value) {
        store.dispatch('fetchUserInfo')
      }
    })
    
    return {
      isAuthenticated,
      isAdmin,
      isTeacher,
      isStudent,
      userInfo,
      userAvatarUrl,
      activeRoute,
      handleLogout,
      zhCn
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

.app-container {
  height: 100vh;
}

.layout-container {
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
  margin-right: 30px;
}

.main-menu {
  flex: 1;
  border-bottom: none;
}

.main-menu .el-sub-menu__title {
  padding: 0 20px;
  border-bottom: none;
}

.main-menu .el-menu-item {
  padding: 0 20px;
}

.main-menu .el-sub-menu .el-menu-item {
  padding-left: 40px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.username {
  margin-left: 8px;
}

.main-content {
  padding: 20px;
  background-color: #f5f7fa;
}

.footer {
  text-align: center;
  color: #909399;
  padding: 20px 0;
  background-color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
